/*
代码实现

1、找到要操作的元素
   =>show
   =>mask
   =>enlarge
   =>list

2、 移入移出
   => 移入 show盒子显示 移出 隐藏

3、 需要调整盒子大小，使之成比例
    遮罩层尺寸              enlarge 盒子
 -----------------  =  -----------------
    show盒子尺寸            背景图尺寸

4、移动
   => 直接mousemove事件，绑定给show
   => 获取坐标
   => 移动的边界值判断
   => 右边跟着动
   遮罩层尺寸          enlarge盒子尺寸
--------------- = ---------------------
   遮罩层移动距离      负的背景图移动距离

5、切换图片
  => list 里面的每一个绑定一个点击事件
  => 事件委托，委托给list 就可以了
*/
function Enlarge(ele) {
  this.ele = document.querySelector(ele);
  //找到盒子
  this.show = this.ele.querySelector(".img1");
  this.mask = this.ele.querySelector(".mask");
  this.enlarge = this.ele.querySelector(".enlarge");
  this.list = this.ele.querySelector(".list");
  this.init();
}
//启动器
Enlarge.prototype.init = function () {
  this.getProp();
  this.overOut();
  this.setScale();
  this.move();
  this.bindEvent();
};
//移入移出
Enlarge.prototype.overOut = function () {
  this.show.addEventListener("mouseover", () => {
    this.mask.classList.add("active");
    this.enlarge.classList.add("active");
  });

  this.show.addEventListener("mouseout", () => {
    this.mask.classList.remove("active");
    this.enlarge.classList.remove("active");
  });
};
//获取尺寸
Enlarge.prototype.getProp = function () {
  //获取遮罩层尺寸
  // const mask_width = this.mask.offsetWidth
  // console.log(mask_width) <函数运行时就已经拿到尺寸了，并不是移入时拿到>

  this.mask_width = parseInt(window.getComputedStyle(this.mask).width);
  this.mask_height = parseInt(window.getComputedStyle(this.mask).height);
  //show盒子尺寸
  this.show_width = this.show.offsetWidth;
  this.show_height = this.show.offsetHeight;
  //背景图尺寸
  const bg = window.getComputedStyle(this.enlarge).backgroundSize.split(" ");
  this.bg_width = parseInt(bg[0]);
  this.bg_height = parseInt(bg[1]);
};
//调整比例
Enlarge.prototype.setScale = function () {
  //计算
  this.enlarge_width = (this.mask_width / this.show_width) * this.bg_width;
  this.enlarge_height = (this.mask_height / this.show_height) * this.bg_height;
  //设置
  this.enlarge.style.width = this.enlarge_width + "px";
  this.enlarge.style.height = this.enlarge_height + "px";
};
//运动
Enlarge.prototype.move = function () {
  this.show.addEventListener("mousemove", (e) => {
    e = e || window.event;

    let x = e.offsetX - 100;
    let y = e.offsetY - 100;

    if (x <= 0) x = 0;
    if (y <= 0) y = 0;
    if (x >= this.show_width - this.mask_width)
      x = this.show_width - this.mask_width;
    if (y >= this.show_height - this.mask_height)
      y = this.show_height - this.mask_height;

    this.mask.style.left = x + "px";
    this.mask.style.top = y + "px";

    //右边跟着动
    const moveX = (this.enlarge_width * x) / this.mask_width;
    const moveY = (this.enlarge_height * y) / this.mask_height;

    this.enlarge.style.backgroundPosition = `-${moveX}px  -${moveY}px`;
  });
};
//绑定事件
Enlarge.prototype.bindEvent = function () {
  //绑定事件
  this.list.addEventListener("click", (e) => {
    e = e || window.event;
    const target = e.target || e.stcElement;
    console.log(target);
    if (target.nodeName === "IMG") {
      //切换边框显示
      for (let i = 0; i < this.list.children.length; i++) {
        this.list.children[i].classList.remove("active");
      }
      target.parentElement.classList.add("active");
      const showImg = target.dataset.show;
      const enlargeImg = target.dataset.big;
      this.show.firstElementChild.src = showImg;
      this.enlarge.style.backgroundImage = `url(${enlargeImg})`;
    }
  });
};
